<template>

  <div>
    <Row>
    <Card>
      <div class="top-tool-bar">

        <Form label-position="right" :label-width="80" inline>
          <FormItem label="查询条件">
            <Select v-model="model1" style="width:150px">
              <Option value="year" key="年" >年</Option>
              <Option value="month" key="月">月</Option>
            </Select>
          </FormItem>
          <FormItem label="时间">
            <DatePicker v-model="modelYear" type="year" placeholder="选择年" style="width: 200px"></DatePicker>
          </FormItem>
          <Button type="primary" icon="ios-search" >搜索</Button>

          <Poptip  class="pull-right" placement="bottom-end">
            <Button>说明</Button>
            <div slot="content">
              说明：<br>
              1、地域对比模块可通过查询条件，查询不同时间段，某地区之间消耗量的对比。<br>
              2、查询条件默认为年，时间默认为当前年份，<br>
              当查询条件为年时，时间为选择年份，柱状图展示内容为对比地区当年起前五年的数据；<br>
              当查询条件为月时，时间为选择年份，柱状图展示内容为对比地区当年不同月份的对比；<br>
              3、鼠标单击地图上的某一省份，则进入省份的地图，有不同城市的区块<br>
              鼠标右击地图上的某一区块出现选项“设为对比项”，点击选项则该地区数据进入右侧的柱状图和下方的统计报表，可同一方法选择其他地区，则可查看区域对比情况。<br>
              鼠标右击地图上已设为对比项的区块，则出现“取消设为对比项”选项，点击选项，其数据则从右侧柱状图和下方的统计报表消失。<br>
            </div>
          </Poptip>
          <!--<Button type="ghost" class="pull-right" @click.prevent.stop="toggleTip()">说明</Button>-->

        </Form>


      </div>

      <!--<div class="top-tip" v-show="showTip">-->
      <!--说明：<br>-->
      <!--1、地域对比模块可通过查询条件，查询不同时间段，某地区之间消耗量的对比。<br>-->
      <!--2、查询条件默认为年，时间默认为当前年份，<br>-->
      <!--当查询条件为年时，时间为选择年份，柱状图展示内容为对比地区当年起前五年的数据；<br>-->
      <!--当查询条件为月时，时间为选择年份，柱状图展示内容为对比地区当年不同月份的对比；<br>-->
      <!--3、鼠标单击地图上的某一省份，则进入省份的地图，有不同城市的区块<br>-->
      <!--鼠标右击地图上的某一区块出现选项“设为对比项”，点击选项则该地区数据进入右侧的柱状图和下方的统计报表，可同一方法选择其他地区，则可查看区域对比情况。<br>-->
      <!--鼠标右击地图上已设为对比项的区块，则出现“取消设为对比项”选项，点击选项，其数据则从右侧柱状图和下方的统计报表消失。<br>-->
      <!--</div>-->

      <div id="chart-map"></div>


      <div id="chart-bar"></div>

      <!--右键自定义菜单-->
      <div class="menu" id="menu" v-show="showMenu">
        <a href="#" @click.prevent.stop="setContrast(1)">设为对比项</a>
        <a href="#" @click.prevent.stop="setContrast(0)">取消设为对比项</a>
      </div>

      <table class="my-table">
        <thead>
        <tr>
          <td rowspan="2">地区</td>
          <td colspan="13">消耗量</td>
        </tr>
        <tr>
          <td>1月</td>
          <td>2月</td>
          <td>3月</td>
          <td>4月</td>
          <td>5月</td>
          <td>6月</td>
          <td>7月</td>
          <td>8月</td>
          <td>9月</td>
          <td>10月</td>
          <td>11月</td>
          <td>12月</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in items">
          <td >{{ item.province }}</td>
          <td >{{ item.Jan }}</td>
          <td >{{ item.Feb }}</td>
          <td >{{ item.Mar }}</td>
          <td >{{ item.Apr }}</td>
          <td >{{ item.May }}</td>
          <td >{{ item.Jun }}</td>
          <td >{{ item.Jul }}</td>
          <td >{{ item.Aug }}</td>
          <td >{{ item.Sept }}</td>
          <td >{{ item.Oct }}</td>
          <td >{{ item.Nov }}</td>
          <td >{{ item.Dec }}</td>
        </tr>
        </tbody>
      </table>
    </Card>
    </Row>

  </div>

</template>

<style scoped>
  .layout {
    position: relative;
  }

  .menu {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    background: #fff;
    box-shadow: 2px 2px 5px #000;
  }

  .menu a {
    display: block;
    color: #000;
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
  }

  .top-tip {
    float: right;
    width: 380px;
    padding: 15px;
    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
    border-radius: 4px;
    line-height: 1.6;
    margin-top: 10px;
    position: absolute;
    right: 24px;
    z-index: 3;
  }

  #chart-map {
    width: 50%;
    height: 600px;
    display: inline-block;
  }



  #chart-bar {
    width: 49%;
    height: 600px;
    display: inline-block;
  }
</style>
<script type="text/ecmascript-6">

  //import api from '@/fetch/api';
  import mapJson from '@/assets/mapJson/json.js';
  import echarts from 'echarts';
  import 'echarts/chart/bar';
  import 'echarts/chart/map';
  import 'echarts/component/toolbox';
  import 'echarts/component/tooltip';
  import 'echarts/component/legend';
  import 'echarts/component/title';

  let myChartMap = null;
  let myChartBar = null;
  let menu = null;

  export default {
    beforeMount () {

    },
    mounted() {
      let $this = this;
      myChartMap = echarts.init(document.getElementById('chart-map'));//基于准备好的dom，初始化echarts实例
      myChartBar = echarts.init(document.getElementById('chart-bar'));
      menu = document.getElementById('menu');
      document.oncontextmenu = function (event) {//鼠标右击事件,此时menu不会显示
        let e = event || window.event; //自定义的菜单显示
        menu.style.left = e.offsetX + 30 + 'px';
        menu.style.top = e.offsetY + 120 + 'px';
        return false;//取消右键点击的默认事件,必须写在最后，否则自定义的右键菜单也不会出现
      };
      document.onclick = function () {
        $this.showMenu = false;
      };
      echarts.registerMap('swd', mapJson.all);

      this.initChart();

      for (var key in mapJson){
        echarts.registerMap(key, mapJson[key]);
      }
      myChartMap.on('contextmenu', function (params) {//menu显示
        let city = params.name;
        $this.selecting = city;
        $this.showMenu = true;
      });
      //监听左键事件
      myChartMap.on('click', function (params) {
        let city = params.name;
        if ($this.showMap){
          $this.goToChart(city)
        }else {
          $this.initMap();
        }
      });
    },
    data () {
      return {
        //showTip: false,
        showMap: 1,//1为全国地图 0为省
        model1: '',
        input1: '',
        selected: [],
        selecting: '',
        showMenu:false,
        optionMap:{},
        modelYear:'',
        items: [
          {
            province:'浙江',
            Jan:'121',
            Feb:'121',
            Mar:'121',
            Apr:'121',
            May:'121',
            Jun:'121',
            Jul:'121',
            Aug:'121',
            Sept:'121',
            Oct:'121',
            Nov:'121',
            Dec:'121',
          },
          {
            province:'福建',
            Jan:'121',
            Feb:'121',
            Mar:'121',
            Apr:'121',
            May:'121',
            Jun:'121',
            Jul:'121',
            Aug:'121',
            Sept:'121',
            Oct:'121',
            Nov:'121',
            Dec:'121',
          },
        ]
      }
    },
    methods: {
//      toggleTip(){
//        this.showTip = !this.showTip;
//      },
      goBack () {
        this.$router.push({path: '/home'});
      },
      getList () {
        let $this = this;
        let params = {};
        $this.$emit('showLoading');
        api.fetchPost(api.path.in_theaters, params).then((data) => {
          //console.log(JSON.stringify(data));
          $this.$emit('hideLoading');
          data.subjects.forEach(function (e) {
            let item = {
              id: 0,
              title: '',
              rating: '',
            };
            item.id = e.id;
            item.title = e.title;
            item.rating = e.rating.average;
            $this.data1.push(item);
          });
        }).catch(err => {
          $this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },
      initMap() {
        let $this = this;
        $this.showMap = 1;
        $this.optionMap = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}'
          },
          series: [
            {
              name: '中国',
              type: 'map',
              mapType: 'swd',
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true
                }
              }
            }
          ]
        };
        myChartMap.setOption($this.optionMap);
      },
      initBar() {
        let $this = this;

        let optionBar = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['浙江', '江苏']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '总量']
          },
          series: [
            {
              name: '浙江',
              type: 'bar',
              data: [18203, 23489, 29034, 104970, 131744, 8203, 23489, 29034, 23489, 29034, 104970, 131744, 630230]
            },
            {
              name: '江苏',
              type: 'bar',
              data: [19325, 23438, 31000, 121594, 134141, 9325, 23438, 31000, 23438, 31000, 121594, 134141, 681807]
            }
          ]
        };


        myChartBar.setOption(optionBar);
      },
      goToChart(city){
        let $this = this;
        $this.selected = [];
        $this.showMap = 0;
        console.log(JSON.stringify($this.optionMap));
        $this.optionMap.series[0].mapType = city;
        $this.optionMap.series[0].data = [
          {name: '嘉兴市',value: 1000 },
          {name: '杭州市',value: 0 }
        ];
        myChartMap.setOption($this.optionMap);
      },
      initChart(){
        this.initMap();
        this.initBar();
      },
      setContrast(state){
          let $this = this;
          $this.showMenu = false;
          if (state){
            let exist = false;
            $this.selected.forEach(function (e,index) {
              if (e === $this.selecting){
                exist = true;
              }
            });
            if (exist){
              $this.$Message.error('对比项中已存在此项');
            }else {
              $this.selected.push($this.selecting);
              //后台请求，myChartBar.setOption(setBarOption(provinceVal,xdata,ydata),true);
            }
          }else {
            let exist = false;
            $this.selected.forEach(function (e,index) {
              if (e === $this.selecting){
                exist = true;
                $this.selected.splice(index,1);//删除数组中序号为index的项
              }
            });
            if (!exist){
              $this.$Message.error('对比项中不存在此项');
            }
          }
      }
    },
    watch: {
      selected(val){
        console.log(JSON.stringify(val));
      }
    }

  };
</script>
